<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        .left{
            width: 200px;
            height: 500px;
            float: left;
        }
        .center{
            width: 400px;
            height: 500px;
            float: left;
            margin: auto;
            overflow: hidden;
        }
        .right{
            width: 200px;
            height: 500px;
            float: right;
        }
        .layout{
            width: 900px;
            height: 500px;
            margin: auto;/*设置长高之后才可以生效*/
            border: 1px solid #EEEEEE;
        }
        td{
            width:  100px;
            height: 45px;
            margin-top: 5px;
        }
        .td_left{
            /*height: 45px;*/
            text-align: right;
        }
        .td_right{
            padding-left: 20px;
        }
        .td_zc{

            padding-left: 20px;
            text-align: center;
        }
        input.zc {
            width: 260px;
            height: 36px;
        }
        #username,#password,#email,#name,#tel,#date{
            width: 200px;
            height: 35px;
            border-radius: 5px;
        }
        .s_red{
            float: left;
            color: red;
        }
    </style>
    <script>
        /**实现输入框的逐一验证*/
        window.onload=function () {
            //1.给表单绑定onsubmit事件
            var formElement = document.getElementsByTagName("form")[0];
            //进行表单验证的事件
            formElement.onsubmit=function () {
                //进行用户名和密码的验证调用
                alert("执行");
                return CheckUsername() && CheckPassword();
                //再次进行调用两个函数进行验证，取到他们的返回值，进行总体的表单提交验证，
                //总体进行两次验证

            }
            //给用户名和密码绑定离焦事件
            document.getElementById("username").onblur=CheckUsername;
            //首先在这里进行CheckUsername调用验证用户名的输入框
            document.getElementById("password").onblur=CheckPassword;
        }
        /**校验用户名*/
        function CheckUsername() {
            alert("校验用户名");
             //1.获取输入框中的值
            var username = document.getElementById("username");
            //2.利用正则表达式进行指定判断规则
            var reg_username=/^\w{6,12}$/;
            //3.进行判断  正确显示图片，错误显示文字信息
            var flag = reg_username.test(username.value);
            if (flag){
                document.getElementById("s_username").innerHTML="<img src='../img/duihao.png' width='25px' height='25px'>";
            }else{
                document.getElementById("s_username").innerHTML="格式有误";
            }
            return flag;
        }
        /**校验密码*/
        function CheckPassword() {
            //1.获取输入框中的值
            var username = document.getElementById("password");
            //2.利用正则表达式进行指定判断规则
            var reg_username=/^\d{6}$/;
            //3.进行判断  正确显示图片，错误显示文字信息
            var flag = reg_username.test(username.value);
            if (flag){
                document.getElementById("s_password").innerHTML="<img src='../img/duihao.png' width='25px' height='25px'>";
            }else{
                document.getElementById("s_password").innerHTML="格式有误";
            }
            return flag;
        }
    </script>
</head>
<body>
    <div class="layout">
        <div class="left">
            <p>新用户注册</p>
            <p>USER   REGISTER</p>
        </div>
        <div class="center">
            <form>
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" placeholder="请输入账号" id="username"></td>
                        <td><span class="s_red" id="s_username"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" placeholder="请输入密码" id="password"></td>
                        <td><span class="s_red" id="s_password"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" placeholder="请输入Email" id="email"></td>
                    </tr><tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" placeholder="请输入真实姓名" id="name"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="tel" placeholder="请输入您的手机号" id="tel"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right"><input type="radio" checked="checked" id="sex" value="男" name="sex"><label>男</label><input type="radio" value="女" name="sex"><label>女</label></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="date">出生日期</label>
                        <td class="td_right"><input type="date" id="date"></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="td_zc"><input type="submit" value="注册" class="zc"></td>
                    </tr>

                </table>
            </form>
        </div>
        <div class="right">
            <p><a href="#">已有帐号，立即登录</a> </p>
        </div>
    </div>
</body>
</html>